<template>
  <div id="openlayersContainer" ref="openlayersContainer"></div>


</template>

<script setup>
import View from 'ol/View';
import TileLayer from 'ol/layer/Tile.js'
import Map from 'ol/Map.js'
import XYZ from 'ol/source/XYZ.js'
import 'ol/ol.css'
import Feature from 'ol/Feature.js'
import Point from 'ol/geom/Point.js';
import VectorSource from 'ol/source/Vector.js'
import VectorLayer from 'ol/layer/Vector.js'
import Style from 'ol/style/Style.js'
import Icon from 'ol/style/Icon.js'
import CircleStyle from 'ol/style/Circle.js'
import Fill from 'ol/style/Fill.js'
import Text from 'ol/style/Text.js'
import { onMounted } from 'vue'
var token = 'ee20013ff03e7d98b23e1251bc0b7cea';

onMounted(async () => {
  // 天地图信息
  const map = new Map({
    target: 'openlayersContainer',
    view,
    layers: [
      tdtLayer, tdtnameLayer
    ],
  });
  // 4.将矢量图层加入地图中
  map.addLayer(vectorLayer);

  map.on('click', function (e) {
    const coords = e.coordinate;
    // console.log(coords);
    map.addLayer(createPoint(coords));
  });
})

const view = new View({
  center: [114.3165, 30.5264],
  zoom: 5,
  maxZoom: 18,
  minZoom: 5,
  projection: 'EPSG:4326'
})
// 天地图矢量
const tdtSourse = new XYZ({
  // 天地图
  url: 'http://t0.tianditu.gov.cn/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=' + token,
})
const tdtLayer = new TileLayer({
  source: tdtSourse
})

// 天地图标注
const tdtnameSourse = new XYZ({
  // 天地图
  url: 'http://t0.tianditu.gov.cn/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=' + token,
})
const tdtnameLayer = new TileLayer({
  source: tdtnameSourse
})
// 通过ol中提高的要素
// 创建要素（点，线，面）并且将要素绘制到底图上 feature =》1.几何形状 2.属性信息
// 1.创建一个点要素 并且在这个点要素绘制一个简单的icon 在武汉上绘制一个小的logo
const iconFeature = new Feature({
  geometry: new Point([114.3165, 30.5264]),
  name: '点'
});
// const canvas = document.createElement('canvas');
// canvas.width = 20;
// canvas.height  = 20;
// const ctx = canvas.getContext('2d');
// ctx.beginPath();
// ctx.arc(10, 10, 10, 0, Math.PI * 2, true);
// ctx.fillStyle  = 'red';
// ctx.fill();


// iconFeature.setStyle(
//   new Style({
//     image: new Icon({
//       img: canvas,
//       imgSize: [20, 20],
//     }),
//   })
// );

iconFeature.setStyle(
  new Style({
    image: new CircleStyle({
      radius: 10,
      fill: new Fill({
        color: 'red',
      }),
    }),
  })
);


// 2.创建矢量数据源
const vectorSource = new VectorSource({
  features: [iconFeature],
});
// 3.创建矢量图层
const vectorLayer = new VectorLayer({
  source: vectorSource,
});


const createPoint = (position) => {
  const iconFeature = new Feature({
    geometry: new Point(position),
    name: '点'
  });
  iconFeature.setStyle(
    new Style({
      image: new CircleStyle({
        radius: 10,
        fill: new Fill({
          color: 'red',
        }),
      }),
      text: new Text({
        text: '点',
        font: 'normal 12px 微软雅黑',
        offsetY: -15,
        fill: new Fill({
          color: 'blue',
        }),
      }),
    })
  );
  const vectorSource = new VectorSource({
    features: [iconFeature],
  });
  const vectorLayer = new VectorLayer({
    source: vectorSource,
  });
  return vectorLayer;
}


</script>

<style>
* {
  margin: 0;
  padding: 0;
}

#openlayersContainer {
  width: 100vw;
  height: 100vh;

}

.button-container {
  position: absolute;
  left: 100px;
  top: 100px;
  z-index: 1;
}
</style>
